<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前台人员登录日志</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script type="text/javascript" src="/layui/layui.js"></script>
    <style>
        .layui-elem-quote{
            border-left: 5px solid #2F4056;
        }
        .layui-unselect.layui-form-switch.layui-form-onswitch{
            background-color: #2F4056;
            border-color: #2F4056;
        }
        .layui-laypage .layui-laypage-curr .layui-laypage-em{
            background-color: #2F4056;
        }
        .layui-form-select dl dd.layui-this{
            background-color: #2F4056;
            color: #fff;
        }
    </style>
</head>
<body>
    <div STYLE="width: 99%;margin: 0 auto">
        <div class="layui-row">
            <!-- 头部 -->
            <div class="layui-elem-quote">
                <span id="examine" style="font-size: 18px">前端用户登录日志</span>
                <span style="float: right;">
                    <button class="layui-btn" style="background-color: #2F4056;" onclick="javascript:Refresh()"><i class="layui-icon layui-icon-refresh"></i>刷新</button>
                    <button class="layui-btn" style="background-color: #2F4056;" onclick="javascript:goBack()"><i class="layui-icon layui-icon-left"></i>返回</button>
                </span>
            </div>
            <!-- 头部结束 -->
            <!-- 身体部分 -->
            <div class="layui-card-body">
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">账号:</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="text" name="account" id="account" autocomplete="off" type="text" placeholder="请输入账号" onfocus="this.placeholder=''" onblur="this.placeholder='请输入账号'"/>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">名称:</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="text" name="nickname" id="nickname" autocomplete="off" type="text" placeholder="请输入名称" onfocus="this.placeholder=''" onblur="this.placeholder='请输入名称'"/>
                            </div>
                        </div>
                        <div class="layui-inline" style="float: right; margin-right: 0px;">
                            <button class="layui-btn" type="submit" lay-submit lay-filter="sub" style="background-color: #2F4056;">
                                <i class="layui-icon layui-icon-search"></i>搜索
                            </button>
                            <button class="layui-btn" type="submit" lay-submit lay-filter="subs" style="background-color: #2F4056;">
                                <i class="layui-icon layui-icon-refresh"></i>重置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <!-- 身体部分结束 -->
        </div>

        <!-- 表格开始 -->
        <div id="box-body-head" style="margin: 10px auto;">
            <table class="layui-table" id="root"></table>
        </div>

        <div id="toptool" class="layui-hide">
            <div id="lefttool" class="layui-icon" style="float: left;">&#xe649; 前端用户登录数据</div>
        </div>
        <!-- 表格结束 -->
    </div>
</body>
<script>
    layui.use(['jquery','layer','form','table'],function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;

        var nickname = '';
        var account = '';
        var loginType = 3;
        var UserLogin = table.render({
            elem:'#root',
            url:"/LoRe/getAllJsLoginRecordbefore?account="+account+"&nickname="+nickname+"&loginType="+loginType,
            toolbar:"#toptool",
            page:true,
            limit:7,
            limits:[7,14,21,28],
            size: 'lg',
            cols:[
                [
                    {type:"checkbox",align:"center"},
                    {type:"numbers",title:"序号",align:"center"},
                    {field:"loginAddress",title:"登录地址",align:"center"},
                    {field:"loginIp",title:"登录ip",align:"center"},
                    {field:"loginState",title:"登录状态",align:"center",templet:function (data) {
                            if(data.loginState=2){
                                return "登录成功";
                            }else {
                                return "登录失败";
                            }
                        }},
                    {field:"loginDate",title:"登录时间",align:"center"},
                    {field:"account",title:"账号",align:"center"},
                    {field:"nickname",title:"名称",align:"center"},
                    {title:"操作",align:"center",templet:function (data) {
                            return "<div>"+
                                "<a href='javascript:delLooginUser(" + data.id + ");' style='color: #2F4056;;margin-right: 10px'>删除</a>" +
                                "</div>";
                        }}
                ]
            ]
        });
        /* 筛选查询开始 */
        form.on('submit(sub)', function (data) {
            var account = $('#account').val();
            var nickname = $('#nickname').val();
            UserLogin.reload({
                url:"/LoRe/getAllJsLoginRecordbefore?account="+account+"&nickname="+nickname+"&loginType="+loginType,
            });
            return false;
        });
        /* 筛选查询结束 */

        /* 重置开始 */
        form.on('submit(subs)', function (data) {
            UserLogin.reload({
                url:"/LoRe/getAllJsLoginRecordbefore?account="+account+"&nickname="+nickname+"&loginType="+loginType,
            });
        });
        /* 重置结束 */

        /* 删除开始 */
        delLooginUser = function delLooginUser(id){
            $.ajax({
                url:'/LoRe/delLooginUser',
                data:id,
                success:function (data) {
                    layer.msg("删除成功")
                }
            })
        }
        /* 删除结束 */


        /* 返回开始 */
        goBack = function goBack() {
            //通过页面查找iframe
            parent.$('#Jump').val('首页');
            parent.getQuick();
            return;
        }
        /* 返回结束 */

        /* 刷新开始 */
        Refresh = function Refresh() {
            location.reload();
        };
        /* 刷新结束 */
    });
</script>
</html>